﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <link href="/css/default.css" rel="stylesheet" />
    <!-- NOTE: Here one of the CSS files comes from the shared portion of the project and the other one
               is platform specific. VS overlays them at build time so that they are unified within the
               same directory.
    -->
    <link href="/pages/home/home.css" rel="stylesheet" />
    <link href="/pages/home/home-shared.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">demo GRAPHICS!!!!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">

            <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
                <!-- NOTE: The data-win-bind attribute targets the JS properties of an element from the source
                           properties of the data context. That's why the syntax for inline styles looks like
                           it would if you were writing JS: style.backgroundImage = dataContext.satellite.
                -->
                <div class="item" data-win-bind="style.backgroundImage: satellite">
                    <div class="zipcode" data-win-bind="textContent: zip"></div>
                    <div class="state" data-win-bind="textContent: state"></div>
                </div>
            </div>

            <!-- NOTE: As I mentioned in the talk you can use the "select('...')" syntax within a options attribute
                       to reach into the surrounding DOM as a scoped query selector. Generally with fragments we
                       recommend that you use class names instead of ids in case the fragment is instantiated in
                       the DOM multiple times. We have a utility function in the JS library that performs the same
                       action: WinJS.UI.scopedSelect and respects the same rules around scope boundaries.
            -->
            <!-- NOTE: One neat trick is to use "select('.pagecontrol').winControl" to get at the instance of the JS
                       object which is associated with this fragment (e.g. the API you define in home.js).
            -->
            <!-- BUG: FIX: using the .orientation property from the code behind -->
            <div data-win-control="WinJS.UI.ListView"
                 data-win-options="{
                    itemTemplate: select('.itemtemplate'),
                    itemDataSource: Data.list.dataSource,
                    oniteminvoked: select('.pagecontrol').winControl.oniteminvoked,
                    layout: { 
                        type: WinJS.UI.ListLayout, 
                        orientation: select('.pagecontrol').winControl.orientation,
                    },
                 }">
            </div>

        </section>

        <!-- NOTE: AppBarCommand icons can either be a CSS background image, think: "url('...')" or a font glyph 
                   in the Segoue UI Symbol font. We provide a set of named glyphs in the AppBarIcon enum and you
                   can also use them by name as I am here with "add"
        -->
        <div data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand"
                    data-win-options="{
                        icon: 'add',
                        label: 'Add',
                        onclick: select('.pagecontrol').winControl.onadd,
                    }">
            </button>
        </div>
    </div>
</body>
</html>
